<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="350px"
    @close="handleClose">
    <el-form ref="deptForm" :model="deptForm" :rules="rules" label-width="80px">
      <el-form-item label="上级部门" prop="parentIds">
        <treeselect
          v-model="deptForm.parentIds"
          :searchable="true"
          :open-on-click="true"
          :clear-on-select="true"
          :close-on-select="true"
          :options="deptList"
          :normalizer="normalizer"
          placeholder="上级部门"/>
      </el-form-item>
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="deptForm.name" placeholder="部门名称"/>
      </el-form-item>
      <el-form-item label="显示排序">
        <el-input v-model="deptForm.sort" placeholder="序号"/>
      </el-form-item>
      <el-form-item label="部门状态" required>
        <el-radio-group v-model="deptForm.status">
          <el-radio
            v-for="item in dictOptions"
            :key="item.dictCode"
            :label="item.dictValue"
          >{{ item.dictLabel }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm">取 消</el-button>
      <el-button :loading="isSubmit" type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

import resultCode from '@/utils/resultCode'
import { getOrgList, addOrg, updateOrg } from '@/api/org'

export default {
  components: { Treeselect },
  data() {
    return {
      visible: false,
      isSubmit: false,
      title: '添加部门',
      dictOptions: [],
      deptList: [],
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
      deptForm: {
        id: null,
        parentIds: null,
        name: null,
        sort: null,
        status: null
      },
      rules: {
        parentIds: [
          { required: true, message: '请选择上级部门', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(dicts, dept) {
      this.dictOptions = dicts
      if (dept) { // 修改逻辑，回填数据
        this.deptForm.parentIds = dept.parentId || null
        this.deptForm.id = dept.id || null
        this.deptForm.name = dept.name || null
        this.deptForm.sort = dept.sort || null
        this.deptForm.status = dept.status || null
        this.title = '修改部门'
      } else { // 添加逻辑
        this.title = '添加部门'
        this.deptForm.parentIds = null
        this.deptForm.id = null
        this.deptForm.name = null
        this.deptForm.sort = null
        this.deptForm.status = null
        this.dictOptions.forEach(dict => {
          if (dict.isDefault === 'Y') {
            this.deptForm.status = dict.dictValue
          }
        })
      }
      this.getDeptList()
      this.visible = true
    },
    getDeptList: function() {
      getOrgList('', '').then(response => {
        const result = response.data // 请求接口返回的内容
        if (result.code === resultCode.SUCCESS) {
          this.deptList = result.data
        }
      })
    },
    handleSubmit: function() {
      this.$refs.deptForm.validate((valid) => {
        if (!valid) {
          return false
        }
        this.isSubmit = true
        if (this.deptForm.id == null) { // 新增
          addOrg(this.deptForm.name, this.deptForm.status,
            this.deptForm.sort, this.deptForm.parentIds).then(response => {
            const result = response.data // 请求接口返回的内容
            if (result.code === resultCode.SUCCESS) {
              this.visible = false
              this.$emit('refreshDataList')
              this.$message.success('添加成功')
            }
            this.isSubmit = false
          }).catch(err => {
            this.isSubmit = false
          })
        } else {
          updateOrg(this.deptForm.id, this.deptForm.name, this.deptForm.status,
            this.deptForm.sort, this.deptForm.parentIds).then(response => {
            const result = response.data // 请求接口返回的内容
            if (result.code === resultCode.SUCCESS) {
              this.visible = false
              this.$emit('refreshDataList')
              this.$message.success('修改成功')
            }
            this.isSubmit = false
          }).catch(err => {
            this.isSubmit = false
          })
        }
      })
    },
    resetForm: function() {
      this.$refs.deptForm.resetFields()
      this.visible = false
    },
    handleClose: function() {
      this.$refs.deptForm.resetFields()
    }
  }
}
</script>
